// 引入 Confirm 组件和 Vue 相关 API
import XtxConfirm from "./confirm.vue";
import { h, render } from "vue"

// 创建一个容器元素，并将其添加到页面中
const div = document.createElement('div')
div.setAttribute('class', 'xtx-confirm-container') // 设置容器类名
document.body.appendChild(div) // 将容器添加到 body 中

// 定义 Confirm 组件的属性类型
type Props = {
  title: string // 确认框标题
  text: string // 确认框内容
}

// 导出 Confirm 函数，用于显示确认框
export default function Confirm ({ title, text }: Props) {

  // 返回一个 Promise 对象，用于处理用户点击确认或取消按钮后的逻辑
  return new Promise((resolve, reject) => {

    // 用户点击确认按钮时的回调函数
    const confirmCallback = () => {
      // 关闭弹窗并移除 DOM 元素中的内容
      render(null, div)
      resolve(undefined) // Promise 成功，关闭弹窗
    }

    // 用户点击取消按钮时的回调函数
    const cancelCallback = () => {
      // 关闭弹窗并移除 DOM 元素中的内容
      render(null, div)
      reject(undefined) // Promise 失败，关闭弹窗
    }

    // 创建 Confirm 组件的虚拟节点，并传入属性和回调函数
    const vNode = h(XtxConfirm, { title, text, confirmCallback, cancelCallback })

    // 将虚拟节点渲染到容器中
    render(vNode, div)
  })
}
